import { FC } from "react";
import {
  componentConfGroup,
  ComponentConfType,
} from "../../../../../../../components/QuestionComponents";
import { Typography } from "antd";
import { useDispatch } from "react-redux";
import { addComponent } from "../../../../../../../store/componentsReducer";
import { nanoid } from "nanoid";
const { Title } = Typography;
const GenComponent = (c: ComponentConfType) => {
  const { title, type, Component, defaultProps } = c;
  const dispatch = useDispatch();
  const handleClick = () => {
    dispatch(
      addComponent({
        fe_id: nanoid(), // 前端生成的 id
        title,
        type,
        props: defaultProps,
      })
    );
  };
  return (
    <div
      key={type}
      className="mb-3 b-1 cursor-pointer bg-#f7f7f7 b-solid b-#f7f7f7 p-3 b-rd-[3px] hover-b-#d9d9d9"
      onClick={handleClick}
    >
      <div className="pointer-events-none">
        <Component />
      </div>
    </div>
  );
};
const ComponentLib: FC = () => {
  return (
    <div >
      {componentConfGroup.map((i, index) => {
        const {
          groupId,
          groupName,
          components,
        }: {
          groupId: string;
          groupName: string;
          components: ComponentConfType[];
        } = i;
        return (
          <div key={groupId}>
            <Title
              level={3}
              style={{ fontSize: "16px", marginTop: index > 0 ? "20px" : "0" }}
            >
              {groupName}
            </Title>
            <div>
              {components.map((c) => GenComponent(c as ComponentConfType))}
            </div>
          </div>
        );
      })}
    </div>
  );
};

export default ComponentLib;
